<html>
<head>
	<title>Steam令牌</title>
	<meta charset="utf-8">
	<style type="text/css">
		#header{
			height: 40px;
			margin-left: auto;
			background-color: #314055;
			padding-top: 1px;
			padding-bottom: 15px;
		}
		#center{
			height: 100px;
			margin-left: auto;
			background-color: #19212c;
			padding-top: 10px;
		}
		
		body{
			margin:0;
			background-color: black;
			color: white;
			text-align: center;
		}
		#shared{
			padding-top:30px;
			background-color:#14191f;
			height:50px;
		}
		#shared input{
			bolder:0;
		}
		#error{
			padding-top:30px;
			background-color:#181818;
			height:40%;
		}
		#footer{
			margin-top:200px;
			padding-top:5px;
			padding-bottom: 15px;
			height: 40px;
			background-color:#314055
		}
	</style>
</head>
<body>
	<div id="header">
		<p>STEAM令牌</p>
	</div>
	<div id="center">
		<h1 id="code">这里是你的令牌<h1>
	</div>
	<div id="shared">
		请输入SharedSecret：<input type="text" id="sharedsecret">&nbsp <input id="getcode" type="button" value="获取令牌">
	</div>
	<div id="error">
		<h2>错误</h2>
		<p>抱歉，发生了网络错误。请检查您设备的网络并重试。</p>
	</div>
	<div id="footer">
		<p>By 宇宙遨游</p>
	</div>
	<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$("#getcode").click(function(){
			$.ajax(
				{
					"url":"getcode",
					"data":"shared="+$("#sharedsecret").val(),
					"type":"get",
					"dataType":"json",
					"success":function(obj){
						$("#code").html(obj.steamCode)
					},
					"error":function(obj){
						$("#code").html("获取失败")
					}
				}
			);
		});
	</script>
</body>
</html>